
import React, { Component } from 'react';
import "./index.scss"

class NotFound extends Component {

    state={
        spanNum:[]
    }

    ranFun(min,max){
        return Math.floor(Math.random()*(max-min+1)+min);
    }

    starInit(){
        var screenW=document.getElementById('bgstar').offsetWidth;
        var screenH=this.bgstar.offsetHeight;
        // console.log(screenW,screenH)

         for (var i = 0; i < 550; i++) { 
            //位置随机
            var x = Math.floor(Math.random() * screenW);
            var y = Math.floor(Math.random() * screenH);
            //大小随机
            var scaler = Math.random() * 1.5;
            //频率随机
            var rate = Math.random() * 2.5;
            var r = this.ranFun(10, 250);
            var g = this.ranFun(10, 250);
            var b = this.ranFun(10, 250);
            this.state.spanNum.push({
                x: x + "px",
                y: y + "px",
                scaler: scaler,
                rate: rate + "s",
                rgb: `rgb(${r},${g},${b})`
            });

            this.setState({
                spanNum:this.state.spanNum
            })
        }
    }

    componentDidMount(){
        this.starInit();
    }

    render() {
        return (
            <div className="errorpage" ref={el=>this.bgstar=el} id="bgstar">
                <img className="errorimg" src={require("../../assets/images/404.png").default} alt="" />
                {
                    this.state.spanNum.map((item,i)=>(
                        <span className="span-dots" key={i} style={{top:item.y,left:item.x,transform:'scale('+item.scaler+')',animationDelay:item.rate,backgroundColor:item.rgb}}></span>
                    ))
                }
            </div>
        );
    }
}

export default NotFound;